<template>
	<div>
		<div class="title-div">
			<h2 class="title">推荐歌单</h2>
			<span class="sub-title">几个歌单，请查收</span>
		</div>
		<div class="tab-content">
			<div class="items">
				<div class="item" :key="item.id" v-for="item in list">
					<div class="img-wrap" @click="toPlayList(item.id)">
						<div class="num-wrap">
							播放量:
							<span class="num">{{ item.playCount}}</span>
						</div>
						<img :src="item.picUrl" :alt="item.name" />
						<span class="iconfont icon-icon_Play"></span>
					</div>
					<p class="name">{{ item.name }}</p>
				</div>
			</div>
		</div>
		<div style="height: 200px">
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: "Songs",
		data(){
			return{
				list:[],
			};
		},
		methods:{
			toPlayList (id) {
				// 携带参数跳转路由
				this.$router.push({
					name: 'playList',
					params: {
						id: id,
					},
				})
			},
			showSongs(){
				axios({
					url:'https://autumnfish.cn//personalized?limit=10',
					method:'get',
					param:{
					}
				}).then(res=>{
					console.log(res)
					this.list=res.data.result;
				})
			}

		},

		created() {
			this.showSongs();
		}

	}
</script>

<style type="text/css">
	.title-div{
		display: flex;
		align-items: flex-end;
	}
	.title{
		margin-right: 10px;
	}

	.sub-title{
		font-size: 15px;
		color: #bebebe;
	}
	.tab-content {
		margin-top: 20px
	}
	              .items {
		              display: flex;
		              flex-wrap: wrap;
		              justify-content: space-between;
	              }
	              .item {
		              width: 19%;
		              position: relative;
		              overflow: hidden;
		              cursor: pointer;
	              }
	              img {
		              width: 100%;
		              object-fit: cover;
		              border-radius: 5px;
	              }
	.num-wrap {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 14px;
		color: white;
		line-height: 30px;
		background: rgba(0, 0, 0, 0.5);
		height: 30px;
		width: 100%;
		transition: all 0.5s;
		padding-left: 5px;
		top: -30px;
		overflow: hidden;
	}

	.img-wrap{
	position: relative;
	}
	.name{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 14px;
	}
</style>